new Vue({
    el: '#app',
    data() {
        return {
            name: '',
            form: {},   //基本信息
            Package_Ranking: [],  //包裹排名
            Sales_Ranking: []  //销售排行
        }
    },
    mounted() {
        this.getchart()
    },
    computed: {
    },
    methods: {
        // 获取请求
        getchart() {
            let _this = this
            // 获取名称
            $.ajax({
                url: DomainName + '/getEnterpriseNameAction',
                type: 'POST',
                data: { token: $.cookie("token") },
                success: function (res) {
                    _this.name = res.Enterprise_Name
                },
                dataType: "json"
            })
            // 基本信息
            $.ajax({
                type: 'POST',
                url: DomainName + '/getBasicInformationAction',
                data: {
                    token: $.cookie("token")
                },
                success: function (data) {
                    _this.form = data
                },
                dataType: "json"
            });
            //包裹排名
            $.ajax({
                type: 'POST',
                url: DomainName + '/getParcelQuantityRankingAction',
                data: {
                    token: $.cookie("token")
                },
                success: function (data) {
                    data.forEach((item, index) => {
                        item.id = index + 1
                        // item.Article_Name
                        item.Article_Name = item.Article_Name.slice(0, 5)
                    })
                    data = _this.bubbleSort(data)
                    _this.Package_Ranking = data
                },
                dataType: "json"
            });
            //销售排行
            $.ajax({
                type: 'POST',
                url: DomainName + '/getSalesRankingAction',
                data: {
                    token: $.cookie("token")
                },
                success: function (data) {
                    data = _this.bubbleSort(data)
                    data.forEach((item, index) => {
                        item.id = index + 1
                        // item.Article_Name
                        item.Article_Name = item.Article_Name.slice(0, 5)
                    })
                    _this.Sales_Ranking = data
                },
                dataType: "json"
            });
            // 物流大数据
            $.ajax({
                type: 'POST',
                url: DomainName + '/getMapAction',
                data: { token: $.cookie("token") },
                success: function (data) {
                    _this.ceshis5(data)
                },
                dataType: "json"
            });
            // 分类占比
            $.ajax({
                type: 'POST',
                url: DomainName + '/getGoodsClassifyAction',
                data: { token: $.cookie("token") },
                success: function (data) {
                    _this.ceshis2(data);
                },
                dataType: "json"
            });
            // 贸易城市
            $.ajax({
                url: DomainName + '/getRegionAction',
                type: 'POST',
                data: { token: $.cookie("token") },
                success: function (res) {
                    _this.ceshis4(res)
                },
                dataType: "json"
            })
            // 平台占比
            $.ajax({
                url: DomainName + '/getPlatformAction',
                type: 'POST',
                data: { token: $.cookie("token") },
                success: function (res) {
                    _this.ceshis1(res)
                },
                dataType: "json"
            })
            // 月统计
            $.ajax({
                url: DomainName + '/getMonthlyStatisticsAction',
                type: 'POST',
                data: { token: $.cookie("token") },
                success: function (res) {
                    _this.ceshis3(res)
                },
                dataType: "json"
            })
        },
        // 物流大数据
        ceshis5(data) {
            var myChart = echarts.init(document.getElementById('map'));
            window.onresize = myChart.resize
            // var uploadedDataURL = "./js/data-1528971808162-BkOXf61WX.json";
            var geoGpsMap = {
                '1': [128.34, 47.05],
            };
            let obj = {}
            var zuobiao = [

                { name: '北京', value: ['116.3979471', '39.9081726'] },

                { name: '上海', value: ['121.4692688', '31.2381763'] },

                { name: '天津', value: ['117.2523808', '39.1038561'] },

                { name: '重庆', value: ['106.548425', '29.5549144'] },

                { name: '河北', value: ['114.4897766', '38.0451279'] },

                { name: '山西', value: ['112.5223053', '37.8357424'] },

                { name: '辽宁', value: ['123.4116821', '41.7966156'] },

                { name: '吉林', value: ['125.3154297', '43.8925629'] },

                { name: '黑龙江', value: ['126.6433411', '45.7414932'] },

                { name: '浙江', value: ['120.1592484', '30.265995'] },

                { name: '福建', value: ['119.2978134', '26.0785904'] },

                { name: '山东', value: ['117.0056', '36.6670723'] },

                { name: '河南', value: ['113.6500473', '34.7570343'] },

                { name: '湖北', value: ['114.2919388', '30.5675144'] },

                { name: '湖南', value: ['112.9812698', '28.2008247'] },

                { name: '广东', value: ['113.2614288', '23.1189117'] },

                { name: '海南', value: ['110.3465118', '20.0317936'] },

                { name: '四川', value: ['104.0817566', '30.6610565'] },

                { name: '贵州', value: ['106.7113724', '26.5768738'] },

                { name: '云南', value: ['102.704567', '25.0438442'] },

                { name: '江西', value: ['115.8999176', '28.6759911'] },

                { name: '陕西', value: ['108.949028', '34.2616844'] },

                { name: '青海', value: ['101.7874527', '36.6094475'] },

                { name: '甘肃', value: ['103.7500534', '36.0680389'] },

                { name: '广西', value: ['108.3117676', '22.8065434'] },

                { name: '新疆', value: ['87.6061172', '43.7909393'] },

                { name: '内蒙古', value: ['111.6632996', '40.8209419'] },

                { name: '西藏', value: ['91.1320496', '29.657589'] },

                { name: '宁夏', value: ['106.2719421', '38.4680099'] },

                { name: '台湾', value: ['120.9581316', '23.8516062'] },

                { name: '香港', value: ['114.139452', '22.391577'] },

                { name: '澳门', value: ['113.5678411', '22.167654'] },

                { name: '安徽', value: ['117.2757034', '31.8632545'] },

                { name: '江苏', value: ['118.7727814', '32.0476151'] }

            ]
            console.log(data)
            // const keys = {
            //     "黑龙江":11010,
            //     "北京":1110,
            //     "吉林":666,
            //     "上海":555,
            // }
            var arr = []
            for (const key in data) {
                for (var i = 0; i < zuobiao.length; i++) {
                    if (zuobiao[i].name == key) {
                        console.log(zuobiao[i].value)
                        obj[key] = zuobiao[i].value
                    }
                }
            }
            console.log(obj)
            var geoCoordMap = obj

            var d1 = data
            var colors = [
                ["#1DE9B6", "#1DE9B6", "#FFDB5C", "#FFDB5C", "#04B9FF", "#04B9FF"],
                ["#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"],
                ["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#8378EA"],
                ["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"],
            ];
            var colorIndex = 0;
            $(function () {
                var year = ["黑龙江"];
                var mapData = [
                    [],
                    [],
                    [],
                    [],
                    [],
                    [],
                ];

                /*柱子Y名称*/
                var categoryData = [];
                var barData = [];

                for (var key in geoCoordMap) {
                    mapData[0].push({
                        "year": '长春',
                        "name": key,
                        "value": d1[key] / 100,
                        "value1": d1[key] / 100,
                    });
                    mapData[1].push({
                        "year": '长春',
                        "name": key,
                        "value": d1[key] / 100,
                        "value1": d1[key] / 100,
                    });
                    mapData[2].push({
                        "year": '青岛',
                        "name": key,
                        "value": d1[key] / 100,
                        "value1": d1[key] / 100,
                    });
                    mapData[3].push({
                        "year": '青岛',
                        "name": key,
                        "value": d1[key] / 100,
                        "value1": d1[key] / 100,
                    });
                    mapData[4].push({
                        "year": '成都',
                        "name": key,
                        "value": d1[key] / 100,
                        "value1": d1[key] / 100,
                    });
                    mapData[5].push({
                        "year": '成都',
                        "name": key,
                        "value": d1[key] / 100,
                        "value1": d1[key] / 100,
                    });
                }

                for (var i = 0; i < mapData.length; i++) {
                    mapData[i].sort(function sortNumber(a, b) {
                        return a.value - b.value
                    });
                    barData.push([]);
                    categoryData.push([]);
                    for (var j = 0; j < mapData[i].length; j++) {
                        barData[i].push(mapData[i][j].value1);
                        categoryData[i].push(mapData[i][j].name);
                    }
                }

                /*$.getJSON(uploadedDataURL, function(geoJson) {*/

                /*echarts.registerMap('china', geoJson);*/
                /*echarts.registerMap('china', geoJson);*/
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };

                var convertToLineData = function (data, gps) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var toCoord = geoCoordMap[dataItem.name];
                        //debugger;
                        var fromCoord = gps; //郑州
                        //  var toCoord = geoGps[Math.random()*3];
                        if (fromCoord && toCoord) {
                            res.push([{
                                coord: fromCoord,
                                value: dataItem.value
                            }, {
                                coord: toCoord,
                            }]);
                        }
                    }
                    return res;
                };

                optionXyMap01 = {
                    timeline: {
                        data: year,
                        axisType: 'category',
                        autoPlay: true,
                        playInterval: 3000,
                        left: '10%',
                        right: '10%',
                        bottom: '3%',
                        width: '80%',
                        //  height: null,
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#ddd'
                                }
                            },
                            emphasis: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        symbolSize: 10,
                        lineStyle: {
                            color: '#555'
                        },
                        checkpointStyle: {
                            borderColor: '#777',
                            borderWidth: 2
                        },
                        controlStyle: {
                            showNextBtn: true,
                            showPrevBtn: true,
                            normal: {
                                color: '#666',
                                borderColor: '#666'
                            },
                            emphasis: {
                                color: '#aaa',
                                borderColor: '#aaa'
                            }
                        },

                    },
                    baseOption: {

                        animation: true,
                        animationDuration: 1000,
                        animationEasing: 'cubicInOut',
                        animationDurationUpdate: 1000,
                        animationEasingUpdate: 'cubicInOut',
                        grid: {
                            right: '1%',
                            top: '15%',
                            bottom: '10%',
                            width: '20%'
                        },
                        tooltip: {
                            trigger: 'axis', // hover触发器
                            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                                shadowStyle: {
                                    color: 'rgba(150,150,150,0.1)' //hover颜色
                                }
                            }
                        },
                        geo: {
                            show: true,
                            map: 'china',
                            roam: true,
                            zoom: 1,
                            center: [113.83531246, 34.0267395887],
                            label: {
                                emphasis: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(147, 235, 248, 1)',
                                    borderWidth: 1,
                                    areaColor: {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    },
                                    shadowColor: 'rgba(128, 217, 248, 1)',
                                    // shadowColor: 'rgba(255, 255, 255, 1)',
                                    shadowOffsetX: -2,
                                    shadowOffsetY: 2,
                                    shadowBlur: 10
                                },
                                emphasis: {
                                    areaColor: '#389BB7',
                                    borderWidth: 0
                                }
                            }
                        },
                    },
                    options: []

                };

                for (var n = 0; n < year.length; n++) {

                    optionXyMap01.options.push({
                        /*backgroundColor: '#013954',*/
                        title:


                            [{
                                text: '物流平台',
                                subtext: '   ',
                                left: '35%',
                                top: '15%',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 25
                                }
                            },
                            {
                                id: 'statistic',
                                text: year[n] + "数据统计",
                                left: '73%',
                                top: '0%',
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 25
                                }
                            }
                            ],
                        xAxis: {
                            type: 'value',
                            scale: true,
                            position: 'top',
                            min: 0,
                            boundaryGap: false,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                margin: 2,
                                textStyle: {
                                    color: '#aaa'
                                }
                            },
                        },
                        yAxis: {
                            type: 'category',
                            //  name: 'TOP 20',
                            nameGap: 16,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#ddd'
                                }
                            },
                            axisTick: {
                                show: false,
                                lineStyle: {
                                    color: '#ddd'
                                }
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    color: '#ddd'
                                }
                            },
                            data: categoryData[n]
                        },

                        series: [
                            //未知作用
                            {
                                //文字和标志
                                name: 'light',
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                data: convertData(mapData[n]),
                                symbolSize: function (val) {
                                    return val[2] / 10;
                                },
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n]
                                    }
                                }
                            },
                            //地图？
                            {
                                type: 'map',
                                map: 'china',
                                geoIndex: 0,
                                aspectScale: 0.75, //长宽比
                                showLegendSymbol: false, // 存在legend时显示
                                label: {
                                    normal: {
                                        show: false
                                    },
                                    emphasis: {
                                        show: false,
                                        textStyle: {
                                            color: '#fff'
                                        }
                                    }
                                },
                                roam: true,
                                itemStyle: {
                                    normal: {
                                        areaColor: '#031525',
                                        borderColor: '#FFFFFF',
                                    },
                                    emphasis: {
                                        areaColor: '#2B91B7'
                                    }
                                },
                                animation: false,
                                data: mapData
                            },
                            //地图点的动画效果
                            {
                                //  name: 'Top 5',
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                data: convertData(mapData[n].sort(function (a, b) {
                                    return b.value - a.value;
                                }).slice(0, 20)),
                                symbolSize: function (val) {
                                    return val[2] / 10;
                                },
                                showEffectOn: 'render',
                                rippleEffect: {
                                    brushType: 'stroke'
                                },
                                hoverAnimation: true,
                                label: {
                                    normal: {
                                        formatter: '{b}',
                                        position: 'right',
                                        show: true
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                        shadowBlur: 10,
                                        shadowColor: colors[colorIndex][n]
                                    }
                                },
                                zlevel: 1
                            },
                            //地图线的动画效果
                            {
                                type: 'lines',
                                zlevel: 2,
                                effect: {
                                    show: true,
                                    period: 4, //箭头指向速度，值越小速度越快
                                    trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
                                    symbol: 'arrow', //箭头图标
                                    symbolSize: 5, //图标大小
                                },
                                lineStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                        width: 0.3, //尾迹线条宽度
                                        opacity: 0.8, //尾迹线条透明度
                                        curveness: .3 //尾迹线条曲直度
                                    }
                                },
                                data: convertToLineData(mapData[n], geoGpsMap[n + 1])
                            },
                            //柱状图
                            {
                                zlevel: 1.5,
                                type: 'bar',
                                symbol: 'none',
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n]
                                    }
                                },
                                data: barData[n]
                            }
                        ]
                    })
                }
                myChart.setOption(optionXyMap01);
                /*});*/
            });


            function randomNum(minNum, maxNum) {
                switch (arguments.length) {
                    case 1:
                        return parseInt(Math.random() * minNum + 1, 10);
                        break;
                    case 2:
                        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                        break;
                    default:
                        return 0;
                        break;
                }
            }

            // 使用刚指定的配置项和数据显示图表。
            //myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        //各平台占比
        ceshis1(data) {
            var myChart = echarts.init(document.getElementById('chart2'));
            var ydata = data;
            window.onresize = myChart.resize;
            var color = ["#8d7fec", "#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"]
            var xdata = ['自营平台', '京东', '淘宝', '抖音', '快手', '拼多多'];


            option = {
                /*backgroundColor: "rgba(255,255,255,1)",*/
                color: color,
                legend: {
                    orient: "vartical",
                    x: "left",
                    top: "center",
                    left: "53%",
                    bottom: "0%",
                    data: xdata,
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: '#fff',
                    },
                    /*itemGap: 16,*/
                    /*formatter:function(name){
                      var oa = option.series[0].data;
                      var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
                      for(var i = 0; i < option.series[0].data.length; i++){
                          if(name==oa[i].name){
                              return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
                          }
                      }
                    }*/

                    formatter: function (name) {
                        return '' + name
                    }
                },
                series: [{
                    type: 'pie',
                    clockwise: false, //饼图的扇区是否是顺时针排布
                    minAngle: 2, //最小的扇区角度（0 ~ 360）
                    radius: ["20%", "60%"],
                    center: ["30%", "45%"],
                    avoidLabelOverlap: false,
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: '#ffffff',
                            borderWidth: 1,
                        },
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            formatter: '{text|{b}}\n{c} ({d}%)',
                            rich: {
                                text: {
                                    color: "#fff",
                                    fontSize: 7,
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    padding: 8
                                },
                                value: {
                                    color: "#8693F3",
                                    fontSize: 12,
                                    align: 'center',
                                    verticalAlign: 'middle',
                                },
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: 15,
                            }
                        }
                    },
                    data: ydata
                }]
            };
            myChart.setOption(option);

            setTimeout(function () {
                myChart.on('mouseover', function (params) {
                    if (params.name == ydata[0].name) {
                        myChart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: 0
                        });
                    } else {
                        myChart.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: 0
                        });
                    }
                });

                myChart.on('mouseout', function (params) {
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: 0
                    });
                });
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: 0
                });
            }, 1000);

            myChart.currentIndex = -1;

            // setInterval(function () {
            //     var dataLen = option.series[0].data.length;
            //     // 取消之前高亮的图形
            //     myChart.dispatchAction({
            //         type: 'downplay',
            //         seriesIndex: 0,
            //         dataIndex: myChart.currentIndex
            //     });
            //     myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
            //     // 高亮当前图形
            //     myChart.dispatchAction({
            //         type: 'highlight',
            //         seriesIndex: 0,
            //         dataIndex: myChart.currentIndex
            //     });
            // }, 1000);

            // 使用刚指定的配置项和数据显示图表。
            /*myChart.setOption(option);*/
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        //商品分类占比
        ceshis2(data) {
            var arr = []
            data.forEach(item => {
                arr.push(item.name)
            })
            var myChart = echarts.init(document.getElementById('chart3'));
            window.onresize = myChart.resize
            option = {
                /*backgroundColor: '#000',*/
                "animation": true,
                "title": {
                    /*"text": 24,*/
                    /* "subtext": "沥青工",*/
                    "x": "center",
                    "y": "center",
                    "textStyle": {
                        "color": "#fff",
                        "fontSize": 5,
                        "fontWeight": "normal",
                        "align": "center",
                        "width": "200px"
                    },
                    "subtextStyle": {
                        "color": "#fff",
                        "fontSize": 5,
                        "fontWeight": "normal",
                        "align": "center"
                    }
                },
                "legend": {
                    "width": "100%",
                    "left": "center",
                    "textStyle": {
                        "color": "#fff",
                        "fontSize": 6
                    },
                    "icon": "circle",
                    "right": "0",
                    "bottom": "0",
                    "padding": [10, 10],
                    "itemGap": 5,
                    "data": arr
                },
                "series": [{
                    "type": "pie",
                    "center": ["50%", "50%"],
                    "radius": ["20%", "43%"],
                    "color": ["#FEE449", "#00FFFF", "#00FFA8", "#9F17FF", "#FFE400", "#F76F01", "#01A4F7", "#FE2C8A"],
                    "startAngle": 135,
                    "labelLine": {
                        "normal": {
                            "length": 15
                        }
                    },
                    "label": {
                        "normal": {
                            "formatter": "{b|{b}:}  {per|{d}%} ",
                            "backgroundColor": "rgba(255, 147, 38, 0)",
                            "borderColor": "transparent",
                            "borderRadius": 4,
                            "rich": {
                                "a": {
                                    "color": "#999",
                                    "lineHeight": 12,
                                    "align": "center",
                                    "fontSize": 8,
                                },
                                "hr": {
                                    "borderColor": "#aaa",
                                    "width": "100%",
                                    "borderWidth": 1,
                                    "height": 0,
                                    "fontSize": 8,
                                },
                                "b": {
                                    "color": "#b3e5ff",
                                    "fontSize": 8,
                                    "lineHeight": 33
                                },
                                "c": {
                                    "fontSize": 7,
                                    "color": "#eee"
                                },
                                "per": {
                                    "color": "#FDF44E",
                                    "fontSize": 7,
                                    "padding": [5, 8],
                                    "borderRadius": 2
                                }
                            },
                            "textStyle": {
                                "color": "#fff",
                                "fontSize": 8
                            }
                        }
                    },
                    "emphasis": {
                        "label": {
                            "show": true,
                            "formatter": "{b|{b}:}  {per|{d}%}  ",
                            "backgroundColor": "rgba(255, 147, 38, 0)",
                            "borderColor": "transparent",
                            "borderRadius": 4,
                            "rich": {
                                "a": {
                                    "color": "#999",
                                    "lineHeight": 22,
                                    "align": "center"
                                },
                                "hr": {
                                    "borderColor": "#aaa",
                                    "width": "100%",
                                    "borderWidth": 1,
                                    "height": 0
                                },
                                "b": {
                                    "color": "#fff",
                                    "fontSize": 7,
                                    "lineHeight": 33
                                },
                                "c": {
                                    "fontSize": 7,
                                    "color": "#eee"
                                },
                                "per": {
                                    "color": "#FDF44E",
                                    "fontSize": 7,
                                    "padding": [5, 6],
                                    "borderRadius": 2
                                }
                            }
                        }
                    },
                    "data": data
                }, {
                    "type": "pie",
                    "center": ["50%", "50%"],
                    "radius": ["15%", "14%"],
                    "label": {
                        "show": false
                    },
                    "data": [{
                        "value": 78,
                        "name": "实例1",
                        "itemStyle": {
                            "normal": {
                                "color": {
                                    "x": 0,
                                    "y": 0,
                                    "x2": 1,
                                    "y2": 0,
                                    "type": "linear",
                                    "global": false,
                                    "colorStops": [{
                                        "offset": 0,
                                        "color": "#9F17FF"
                                    }, {
                                        "offset": 0.2,
                                        "color": "#01A4F7"
                                    }, {
                                        "offset": 0.5,
                                        "color": "#FE2C8A"
                                    }, {
                                        "offset": 0.8,
                                        "color": "#FEE449"
                                    }, {
                                        "offset": 1,
                                        "color": "#00FFA8"
                                    }]
                                }
                            }
                        }
                    }]
                }]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart.currentIndex = -1;
            // setInterval(function () {
            //     var dataLen = option.series[0].data.length;
            //     // 取消之前高亮的图形
            //     myChart.dispatchAction({
            //         type: 'downplay',
            //         seriesIndex: 0,
            //         dataIndex: myChart.currentIndex
            //     });
            //     myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
            //     // 高亮当前图形
            //     myChart.dispatchAction({
            //         type: 'highlight',
            //         seriesIndex: 0,
            //         dataIndex: myChart.currentIndex
            //     });
            // }, 1000);

            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        //月统计
        ceshis3(data) {
            var myChart = echarts.init(document.getElementById('chart4'));
            window.onresize = function () {
                myChart.resize();
            }
            var arr = []
            var a = data.collection.data
            var b = data.sales_order.data
            // var c = 0
            // var d = 0
            // a.forEach(item=>{
            //     c+=Number(item)
            // })
            // b.forEach(item=>{
            //     d+=Number(item)
            // })
            for (var i = 0; i < 12; i++) {
                if (Number(a[i]) / Number(b[i]) * 100) {
                    arr.push(parseInt(Number(a[i]) / Number(b[i]) * 100))
                } else {
                    arr.push(0)
                }
            }
            var colors = ['rgb(46, 199, 201)', 'rgb(90, 177, 239)', 'rgb(255, 185, 128)'];

            option = {
                color: colors,
                series: [{
                    name: data.collection.name,
                    type: 'bar',
                    data: data.collection.data,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 2
                        }
                    }
                },
                {
                    barGap: '-50%', // 增加偏移量使重叠显示
                    name: data.sales_order.name,
                    type: 'bar',
                    yAxisIndex: 1,
                    data: data.sales_order.data,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 2
                        }
                    }
                },
                {
                    name: '平均值',
                    type: 'line',
                    yAxisIndex: 2,
                    data: arr,
                }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    formatter: function (params) {
                        // 系列
                        let html = params[0].name + "<br>";

                        for (var i = 0; i < params.length; i++) {

                            // 获取每个系列对应的颜色值
                            html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params[i].color + ';"></span>';

                            // 通过判断指定系列增加 % 符号
                            if (option.series[params[i].seriesIndex].type == "line") {
                                html += params[i].seriesName + ": " + params[i].value + "%<br>";
                            } else {
                                html += params[i].seriesName + ": " + params[i].value + "<br>";
                            }
                        }
                        return html;
                    }
                },
                grid: {
                    right: '20%'
                },
                toolbox: {
                    feature: {
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                legend: {
                    textStyle: {
                        color: '#fff'
                    },
                    data: ['下单量', '付款量', '平均值']
                },
                // 缩放组件
                /*dataZoom: {
                    type: 'slider'
                },*/
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        formatter: '{value} 万',
                        textStyle: {
                            color: "#ffffff" //X轴文字颜色
                        }
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }],
                yAxis: [{
                    type: 'value',
                    name: '下单量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 万'
                    }
                },
                {
                    type: 'value',
                    name: '付款量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    offset: 80,
                    axisLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 万'
                    }
                },
                {
                    type: 'value',
                    name: '平均值',
                    min: 0,
                    max: 25,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 万'
                    }
                }
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        //全球贸易国家城市排行
        ceshis4(data) {
            console.log(data)
            var arr = []
            var arr1 = []
            let list = []
            let list1 = []
            var color = [
                "rgba(83,78,225,1)",
                "rgba(236,214,79,1)",
                "rgba(0,228,240,1)",
                "rgba(68,209,109,1)",
                "rgba(18,78,145,1)",
                "rgba(189,196,20,1)",
                "rgba(200,204,165,1)",
                "rgba(83,78,225,1)",
                "rgba(236,214,79,1)",
                "rgba(0,228,240,1)",
                "rgba(68,209,109,1)",
                "rgba(18,78,145,1)",
                "rgba(189,196,20,1)",
                "rgba(200,204,165,1)"
            ]
            for (const key in data) {
                arr.push(key)
                arr1.push(data[key])
            }
            arr.forEach(item => {
                list.push({
                    "name": item,
                    "stack": "a",
                    "type": "bar"
                })
            })
            arr1.forEach((item, i) => {
                list1.push({
                    "name": "",
                    "value": item,
                    "label": {
                        "show": true,
                        "position": "top",
                        formatter: function (params) {
                            var index = params.dataIndex;
                            var str = "{a|" + params.value + "}\n{c|" + params.value + "个}";
                            return str;
                        },
                        "rich": {
                            "a": {
                                "fontSize": 18,
                                "color": color[i],
                                "align": "center",
                                "height": 40
                            },
                            "c": {
                                "fontSize": 18,
                                "color": "#fff",
                                "padding": [
                                    -2,
                                    0,
                                    2,
                                    0
                                ],
                                "backgroundColor": {
                                    "image": labelimg
                                },
                                "align": "center",
                                "verticalAlign": "bottom",
                                "height": 50,
                                "lineHeight": 40,
                                "width": 100
                            }
                        }
                    },
                    "itemStyle": {
                        "normal": {
                            "color": {
                                "type": "linear",
                                "x": 0,
                                "y": 0,
                                "x2": 0,
                                "y2": 1,
                                "colorStops": [{
                                    "offset": 0,
                                    "color": color[i]
                                },
                                {
                                    "offset": 1,
                                    "color": color[i]
                                },],
                                "global": false
                            }
                        }
                    }
                })
            })
            var a = {
                "type": "bar",
                "data": list1,
                "stack": "a",
                "symbol": "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z"
            }
            list.push(a)
            const chartDom = document.getElementById('chart5')
            var myChart = echarts.init(chartDom);
            window.onresize = function () {
                myChart.resize();
            }
            var labelimg = "";

            option = {
                /*backgroundColor: "#0E233E",*/
                "grid": {
                    "left": "6%",
                    "top": "14%",
                    "right": "3%",
                    "bottom": "15%"
                },
                "legend": {
                    "data": arr,
                    "top": "90%",
                    "icon": "circle",
                    "textStyle": {
                        "color": "#0DCAD2"
                    }
                },
                "color": [
                    "#534EE1",
                    "#ECD64F",
                    "#00E4F0",
                    "#44D16D",
                    "#124E91",
                    "#BDC414",
                    "#C8CCA5"
                ],
                "tooltip": {
                    "position": "top",
                },
                "xAxis": {
                    "data": arr,
                    "axisLabel": {
                        "show": false,
                        "color": "#999999",
                        "fontSize": 10
                    },
                    "axisTick": {
                        "show": false
                    },
                    "axisLine": {
                        "show": false
                    },
                    "splitLine": {
                        "show": false
                    }
                },
                "yAxis": {
                    "type": "value",
                    "axisLabel": {
                        "show": false,
                        "color": "#ffffff",
                        "fontSize": 10
                    },
                    "axisTick": {
                        "show": false
                    },
                    "axisLine": {
                        "show": false
                    },
                    "splitLine": {
                        "show": false
                    }
                },
                "series": list
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        // 冒泡排序
        bubbleSort(array) {
            let len = array.length;
            for (let i = 0; i < len - 1; i++) {
                for (let j = 0; j < len - 1 - i; j++) {
                    if (parseInt(array[j].Quantity) < parseInt(array[j + 1].Quantity)) {        //相邻元素两两对比  
                        let temp = parseInt(array[j + 1].Quantity);      //元素交换  
                        array[j + 1].Quantity = parseInt(array[j].Quantity);
                        array[j].Quantity = temp;
                    }
                }
            }
            return array;
        }
    },
})
